<template>
  <!-- 重设密码 -->
  <layout title="忘记密码" background="#fff">
    <view
      class="screen"
      style="height: 100vh"
      :style="'padding-top:' + vuex_phoneLayout.screenPaddingTop + 'px'"
    >
      <view>
        <view class="login_title"> 忘记密码 </view>
        <view class="list">
          <view class="list-call">
            <view
              class="iconfont icon-key"
              style="font-size: 22px; color: #7b7b7b"
            ></view>
            <input
              class="u-input"
              type="text"
              v-model="code"
              maxlength="32"
              placeholder="请输入"
              value="admin"
            />
            <view class="" style="color: #4e95fc; font-size: 30rpx">
              <text v-if="!codeDisabled">{{ loadTime }}s</text>
              <text @tap="getCode" v-if="codeDisabled">获取验证码</text>
            </view>
          </view>
          <view class="list-call">
            <view
              class="iconfont icon-lock"
              style="font-size: 22px; color: #7b7b7b"
            ></view>
            <input
              class="u-input"
              type="text"
              v-model="password"
              maxlength="32"
              placeholder="请输入密码"
              :password="!showPassword"
            />
            <image
              class="u-icon-right"
              :src="
                '/static/aidex/login/eye_' +
                (showPassword ? 'open' : 'close') +
                '.png'
              "
              @click="showPass()"
            ></image>
          </view>
          <view class="list-call">
            <view
              class="iconfont icon-lock"
              style="font-size: 22px; color: #7b7b7b"
            ></view>
            <input
              class="u-input"
              type="text"
              v-model="password1"
              maxlength="32"
              placeholder="请再次输入密码"
              :password="!showPassword"
            />
            <image
              class="u-icon-right"
              :src="
                '/static/aidex/login/eye_' +
                (showPassword ? 'open' : 'close') +
                '.png'
              "
              @click="showPass()"
            ></image>
          </view>
          <div style="padding: 15rpx 0; font-size: 24rpx; color: #b5b5b5">
            密码长度8~32位，可包含数字和字母，不可使用特殊符号
          </div>
        </view>
        <view class="default-button" @click="submit('1')"
          ><text>确定</text></view
        >
      </view>

      <view
        class="screen-bottomFill"
        style="opacity: 1"
        :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- 用来填充导航 和 底部的多余 -->
      </view>
    </view>
  </layout>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
import base64 from "@/common/base64.js";
export default {
  data() {
    return {
      navigationBarStyle: {
        background: "",
        color: "black",
        iconText: "", //导航栏文字
      },
      codeDisabled: false,
      loadTime: 60,
      timer: "",
      phoneNo: "",
      code: "",
      password: "",
      password1: "",
      loginType: "currentPhone",
      showPassword: false,
      remember: true,
      isValidCodeLogin: false,
      validCode: "",
      imgValidCodeSrc: null,
    };
  },
  onLoad(option) {
    this.phoneNo = option.phoneNo;
  },
  onShow() {
    this.loadTime = 60;
    this.codeDisabled = true;
  },
  methods: {
    getTime() {
      this.loadTime--;
      if (this.loadTime === 0) {
        clearInterval(this.timer);
        this.codeDisabled = true;
      }
    },
    getCode() {
      if (this.codeDisabled) {
        uni.hideLoading();
        this.$u.api
          .getForgetCode({
            phoneNo: this.phoneNo,
          })
          .then((res) => {
            if (res.code == "200" || res.code == "10707") {
              this.loadTime = 60;
              this.codeDisabled = false;
              this.timer = setInterval(this.getTime, 1000);
              this.$u.toast("验证码已发送");
            } else {
              // this.$refs.uCode.reset();
              this.$u.toast(res.message);
            }
          });
      } else {
        this.$u.toast("请稍后重新获取");
      }
    },
    showPass() {
      this.showPassword = !this.showPassword;
    },
    refreshImgValidCode(e) {
      if (this.vuex_token == "") {
        this.$u.api.index().then((res) => {
          this.imgValidCodeSrc =
            this.vuex_config.baseUrl +
            "/validCode?__sid=" +
            res.sessionid +
            "&t=" +
            new Date().getTime();
        });
      } else {
        this.imgValidCodeSrc =
          this.vuex_config.baseUrl +
          "/validCode?__sid=" +
          this.vuex_token +
          "&t=" +
          new Date().getTime();
      }
      this.validCode = "";
    },
    submit(loginType) {
      if (this.code.length == 0) {
        this.$u.toast("请输入验证码");
        return;
      }
      if (this.password.length < 8) {
        this.$u.toast("请输入长度8-32位的密码");
        return;
      }
      if (this.password != this.password1) {
        this.$u.toast("2次输入密码不一致");
        return;
      }
      this.$u.api
        .resetPassword(this.phoneNo, {
          password: this.password.split(""),
          code: this.code,
        })
        .then((res) => {
          if (res.code == "200") {
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/sys/home/index",
              });
            }, 500);
          } else {
            this.$u.toast(res.message);
          }
          if (res.isValidCodeLogin) {
            this.isValidCodeLogin = true;
            this.refreshImgValidCode();
          }
        });
    },
    wxLogin(res) {
      this.$u.toast("微信登录");
    },
    qqLogin() {
      this.$u.toast("QQ 登录");
    },
  },
};
</script>
<style lang="scss">
@import "index.scss";

.logo {
  width: 80%;
  font-size: 64rpx;
  color: #5473e8;
  margin: 80rpx auto 80rpx auto;
}
.list-call-icon {
  color: #ff0000;
}
.currentPhone-box {
  text-align: center;
  padding: 40rpx 80rpx;
  .number-text {
    color: #000000;
    font-size: 60rpx;
  }
  .other-text {
    color: #999999;
    font-size: 26rpx;
    padding: 20rpx 0;
  }
  .u-btn {
    margin: 30rpx auto;
  }
  .u-hairline-border {
    border: 1px solid #fff;
  }
}

.register {
  display: inline-block;
  color: #5473e8;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  float: left;
  margin-top: 6rpx;
}
.register-link {
  float: left;
  padding: 0 16rpx;
}
.reg-link {
  display: inline-block;
  color: #5473e8;
}
.oauth2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0rpx 100rpx 30rpx;

  image {
    height: 80rpx;
    width: 80rpx;
  }
}
.u-tabs {
  padding: 0 70rpx;
}
</style>
